<template>
  <el-form-item :class="attributes?.customClassName?.formItemClassName ?? ''" v-bind="attributes.formItem">
    <template
      v-for="item in attributes?.formItem?.slotScope ?? []"
      :key="item.slotName"
      v-slot:[item.slotName]="scope">
      <component :is="item.render(scope)" />
    </template>
    <el-select
      :key="selectKey"
      v-model="selectValue"
      :class="attributes?.customClassName?.elModelClassName ?? ''"
      v-bind="attributes.elModel">
      <template
        v-for="item in attributes?.elModel?.slotScope ?? []"
        :key="item.slotName"
        v-slot:[item.slotName]="scope">
        <component :is="item.render(scope)" />
      </template>
      <el-option-group
        v-for="group in item.options"
        :key="group.label"
        :label="group.label"
        >
        <div v-infinite-scroll="attributes?.infinite?.infiniteFn ?? infiniteEmptyFn" v-bind="attributes.infinite">
            <el-option v-for="group in attributes.elOption.options" :key="group.value" v-bind="group" />
        </div>
        </el-option-group>
      
    </el-select>
  </el-form-item>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
    const props = defineProps({
    value: {
        type: [String, Number, Boolean, Date, Array],
        required: true
    },
    attributes: {
        type: Object,
        default: () => ({})
    }
    })

    const emit = defineEmits(['push-val'])
    const selectKey = ref(+new Date())
    const selectValue = computed({
    get() {
        return props.value
    },
    set(val) {
        emit('push-val', val)
    }
    })
    watch(
    () => selectValue.value,
    (val, bef) => {
        if (typeof val !== typeof bef) {
        selectKey.value = +new Date()
        }
    }
    )
    const infiniteEmptyFn = () => ({})
</script>